<script>
// import data from '/src/assets/data.js'
export default {
    props: ["item"],
    data() {
        return {
            letterItem: this.item,
            src:this.item.src
        }
    },
    mounted() {

    },
    methods: {
        playAudio: function (sign) {
            // 使用服务器本地地址 
            const music = new Audio('/letter_page/mp3/'+ sign +'.mp3');
            // const music = new Audio('/src/assets/mp3/' + sign + '.mp3');
            console.log(music)
            music.play();
            // music.loop = true;
            music.playbackRate = 1;
            // music.pause();
        }
    }
}


</script>
<template>
    <div class="item">
        <div class="title" @click="playAudio(letterItem.sign)">{{letterItem.sign}}</div>
        <div class="tip">{{letterItem.phonetic}}</div>
        <!-- <audio controls="controls" class="bird-native-player" :src="src"></audio> -->
    </div>
</template>

<style scoped>
.item {
    display: flex;
    width: 9rem;
    height: 6rem;
    /* background-color: azure; */
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.item div {
    text-align: center;
    width: 7rem;
}

.title {
    font-size: 2rem;
    font-weight: bolder;
    cursor: pointer;
    transition: .3s;
}

.title:hover {
    color: #f799ff;
}

.tip {
    font-size: 1rem;
    user-select: none;
    white-space: nowrap ;
}
</style>